<template>
  <div class="brand">
      <div class="brand_top">
         <h6><i class="iconfont icon-remen1"></i> 热门品牌</h6>
          <span>更多 ></span>
      </div>
      <div class="brand_main">
          <div class="main_nr">
          <dl v-for="item in PopularBrandList" :key="item.manageShopId">
              <dt><img :src="item.logo" alt=""></dt>
              <dd>
                  <p>{{item.shopName}}</p>
                  <p>{{item.styleCooking}}</p>
              </dd>
          </dl>
          </div>
          
      </div>
  </div>
</template>

<script>
import "../static/font_q18kntx4ppr/iconfont.css"
import {GetPopularBrand} from "../services/index"
export default {
  data(){
      return {
          PopularBrandList:[],
      }
  },
 async created(){
      let result=await GetPopularBrand();
      if(result.errNo===0){
          this.PopularBrandList=result.data
      }
  }
};
</script>

<style scoped lang="scss">
   .brand{
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       .brand_top{
           width: 90%;
           height: 60rpx;
           display: flex;
           justify-content: space-between;
           align-items: center;
           h6{
               font-weight: 900;
               display: flex;
               align-items: center;
               i{
                   color: red;
                   margin-right: 10rpx;
               }
           }
           span{
               font-size: 24rpx;
           }
       }
       .brand_main{
           width: 100%;
           align-items: center;
           overflow-x: scroll;
           .main_nr{
               display: flex;
               width: 1200rpx;
               align-items: center;
               overflow-x: auto;
               flex-wrap: nowrap;
               dl{
                   width: 200rpx;
                   height: 200rpx;
                   align-items: center;
                   justify-content: center;
                   display: flex;
                   flex-direction: column;
                   dt{
                       width: 100rpx;
                       height: 100rpx;
                       img{
                           width: 100%;
                           height: 100%;
                       }
                   }
                   dd{
                       width: 100%;
                       margin-top: 10rpx;
                       p{
                           width: 100%;
                           font-size: 24rpx;
                           text-align: center;
                       }
                   }
               }
           }
       }
       .brand_main::-webkit-scrollbar {display:none}
   }
</style>
